<template>
  <div>
    <div class="top-wrap">
      <van-row>
        <van-col :span="12">VILI-APP</van-col>
        <van-col :span="12" class="btn-box">
          <van-button plain text="注册" size="mini" />
          <van-button type="primary" plain text="登录" size="mini" @click="toSignIn" />
        </van-col>
      </van-row>
    </div>
    <div class="expires">
      <div class="ex-top">距 <span>{{ periods }}</span> 期剩余</div>
      <van-count-down :time="time" millisecond format="HH:mm:ss:SS"/>
    </div>
    <div class="list-wrap">
      <van-pull-refresh
        class="content"
        v-model="refreshing"
        loading-text="刷新中···"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="finishedText"
          v-model:error="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
          offset="100"
        >
          <!-- 自定义列表每项展示内容 -->
          <div class="list-item" v-for="item in list" :key="item.resultId">
            <div class="periods">{{item?.periods}}期</div>
            <van-row class="numbers">
              <template v-for="num in item.numbers">
                <van-col><b>{{ num }}</b></van-col>
              </template>
            </van-row>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchList, getPeriod } from '@/api/lotto';
import { showFailToast } from 'vant';

const periods = ref('')
const time = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(true);
const finishedText = ref('没有更多了')
const error = ref(false);
const pageSize = ref(10)
const pageIndex = ref(1)

// 总条数
const totalNum = ref(0)
// 清空日志列表-重置分页数据
const clearList = () => {
  list.value = []
  pageSize.value = 10
  pageIndex.value = 1
}

// 下拉刷新
const onRefresh = () => {
  // 先清空
  clearList()
  // 下拉刷新时不展示加载完成文字，请求成功后再展示
  finishedText.value = '';
  // 手动调用 load方法查询数据
  onLoad()
};

// 上拉加载
const onLoad = () => {
  fetchList({
    size: pageSize.value, // 页大小
    current: pageIndex.value, // 页码
  }).then((res: any) => {
    const { data, code } = res
    // 成功
    if (code === 0) {
      // 处理数据，新查回的数据添加到list，也可以用 concat 连接处理
      if (data?.records && data?.records.length > 0) {
        data.records.forEach((item: any) => {
          let number = item.drawingNumber
          item.numbers = number.split(',')
          list.value.push(item)
        })
      }
      // 下拉刷新完成
      if (refreshing.value) {
        refreshing.value = false;
      }
      pageIndex.value = data?.current + 1
      pageSize.value = data?.size
      // 总条数
      totalNum.value = data?.total
      loading.value = false;
      // 数据全部加载完成
      finished.value = list.value.length >= totalNum.value;
      finishedText.value = '没有更多了';
    } else {
      // 失败
      res.data.message && showFailToast(res.data.message)
      if (refreshing.value) {
        refreshing.value = false;
      }
      // 这里也可以处理展示数据加载异常
      error.value = true;
    }
  }).catch(() => {
    error.value = true;
    if (refreshing.value) {
      refreshing.value = false;
    }
  })
};

const getNext = () => {
  getPeriod().then((res: any) => {
    const {data, code} = res
    if (code == 0) {
      periods.value = data.periods
      time.value = data.remainTime
    }
  })
}

onMounted(async () => {
  getNext();
})

const toSignIn = () => {
  window.location.href='http://localhost:7777/#/'
}

</script>

<style scoped lang="scss">
.top-wrap {
  height: 56px;
  line-height: 56px;
  padding-left: 12px;
  border-bottom: 1px solid #d7d9da;
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
  }
}
.expires {
  border-bottom: 1px solid #d7d9da;
  padding: 12px;
  font-size: 14px;
  color: #181818;
  height: 60px;
  .ex-top span {
    color: #4c9d9f;
  }
  .van-count-down {
    font-size: 36px;
    color: #276769;
    margin: 16px 0 6px 0;
  }
}
.list-wrap {
  //overflow-y: scroll;
  height: calc(100vh - 116px);
  .list-item {
    padding: 0 0 0 12px;
    height: 80px;
    border-bottom: 1px solid #d7d9da;
    .periods {
      margin-bottom: 10px;
      line-height: 30px;
    }
    .numbers {
      display: flex;
      margin-top: 10px;
      color: #f8f8f8;
      b {
        border-radius: 36px;
        background: #0d67d9;
        display: block;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 36px;
      }
      .van-col {margin-right: 12px;}
      div:last-child b {
        background: #de1f1f;
      }
    }
  }
}
</style>
